
<ion-header>
    <ion-toolbar class="b-b-shaow" color="winter">
        <ion-buttons left>
            <button (click)="goBack()" ion-button icon-only>
                <ion-icon name="arrow-back"></ion-icon>
            </button>
        </ion-buttons>
        <ion-title align-title="center">首单激活</ion-title>
    </ion-toolbar>
</ion-header>


<ion-content>

  <!--<ion-label class="text-gray first-tip">购买首单商品，激活账号</ion-label>-->

    <div class="cart-tip">
        <i class="iconfont icon-gouwuche-tips-laba"></i>
        <span>首购单用于新会员注册和老会员激活</span>
    </div>
    <!--套餐-->
    <div class="cart-sort" *ngFor="let item of packageList">
        <ion-grid class="cart-package-title">
            <ion-row class="cart-package">
                <ion-col class="check" col-1>
                    <!--<ion-checkbox [(ngModel)]="item.isCheck" [disabled]="true" (click)="updateCheck(item,'package')"></ion-checkbox>-->
                    <div [ngClass]="{'order-check':true,checked:item.isCheck}" (click)="updateCheck(item,'package')">
                        <div class="order-check-inner"></div>
                    </div>
                </ion-col>
                <ion-col>
                    &yen;&nbsp;{{item.FP_PRICE}}&nbsp;{{item.PRODUCT_NAME}}
                </ion-col>
            </ion-row>
        </ion-grid>
        <ion-grid class='cart-main package-main'>
            <ion-row>
                <ion-col col-3 (click)="goGoodsDetail(item)">
                    <img  [src]="imgUrl+item.IMAGE_LINK" onerror='this.src="assets/img/null-img.png"'  class="small-pic">
                </ion-col>
                <ion-col class="p-l-0" (click)="goGoodsDetail(item)">
                    <ion-row>
                        <ion-col col-12 class='p-l-0'>
                              <span class="name">
                                  {{item.PRODUCT_NAME}}
                              </span>
                        </ion-col>
                        <ion-col col-12 class='p-l-0'>
                              <span class="pv">
                                  PV: +${{item.FP_PV}}
                              </span>
                        </ion-col>
                    </ion-row>
                </ion-col>
                <ion-col col-3 class="no-padding text-right">
                    <ion-row>
                        <ion-col col-12 class="price">
                            &yen;&nbsp;{{item.FP_PRICE}}
                        </ion-col>
                        <ion-col col-12 class="number text-gray">
                            ×&nbsp;1
                        </ion-col>
                    </ion-row>
                </ion-col>
            </ion-row>
        </ion-grid>
    </div>

    <!--单品-->
    <div class="cart-sort">
      <ion-grid class='cart-main' *ngFor="let item of goodsList">
          <ion-row>
              <ion-col col-1>
                  <div [ngClass]="{'order-check':true,checked:item.isCheck}" (click)="updateCheck(item,'single')">
                      <div class="order-check-inner"></div>
                  </div>
              </ion-col>
              <ion-col col-4 (click)="goGoodsDetail(item)">
                  <img  [src]="imgUrl+item.IMAGE_LINK" onerror='this.src="assets/img/null-img.png"'  class="pic">
                  <!--[src]="item.IMAGE_LINK"-->
              </ion-col>
              <ion-col class="p-l-0">
                  <ion-row (click)="goGoodsDetail(item)">
                      <ion-col col-12 class='p-l-0'>
                          <span class="name">
                              {{item.PRODUCT_NAME}}
                          </span>
                      </ion-col>
                      <ion-col col-12 class='p-l-0'>
                          <span class="pv">
                              PV: +${{item.FP_PV}}
                          </span>
                      </ion-col>
                  </ion-row>
                  <ion-row>
                      <ion-col col-6 class='p-0 text-red'>
                          &yen;&nbsp;{{item.FP_PRICE}}
                      </ion-col>
                      <ion-col col-6 class='p-0'>
                          <span class="num-container">
                              <label class="reduce" (click)="reduce(item)"><i class="iconfont icon-gouwuche-shuliangjian"></i></label>
                              <input type="number"  class="number"  [(ngModel)]="item.QTY"  (ngModelChange)="inputCheck(item)" >
                              <label class="add" (click)="add(item)"><i class="iconfont icon-gouwuche-shuliangjia"></i></label>
                          </span>
                      </ion-col>
                  </ion-row>
              </ion-col>
          </ion-row>
      </ion-grid>
  </div>



</ion-content>


<ion-footer class='cart-footer'>
  <!-- 全选结算 -->
  <ion-toolbar>
    <div class="type-main clearfix">
      <div class="del-btn pull-right" (click)='settle()'>
        结算({{settleTotal.number}})
      </div>
      <div class="total pull-right">
        <div class="number">合计：&yen;{{settleTotal.money}}</div>
        <div class="pv">PV: +${{settleTotal.pv}}</div>
      </div>
    </div>
  </ion-toolbar>
</ion-footer>
